| 实现一个带有动效的 React 弹窗组件 | 您所在的位置：网站首页 › react modal设置弹窗可移动 › 实现一个带有动效的 React 弹窗组件 |
实现一个带有动效的 React 弹窗组件
|
我们在写一些 UI 组件时，若不考虑动效，就很容易实现，主要就是有无的切换（类似于 Vue 中的 v-if 属性）或者可见性的切换（类似于 Vue 中的 v-show 属性）。
在 React 中，可以这样来实现： interface ModalProps { open: boolean; onClose?: () => void; children?: any; } const Modal = ({open. onClose, children}: ModalProps) => { if (!open) { return null; } return createPortal( {children} x , document.body); };使用方式： const App = () => { const [open, setOpen] = useState(false); return ( setOpen(true)}>show modal setOpen(false)}> modal content ); };我们在这里就是使用open属性来控制展示还是不展示，但完全没有渐变的效果。 若我们想实现 fade, zoom 等动画效果，还需要对此进行改造。
很多同学在自己实现动效时，经常是展示的时候有动效，关闭的时候没有动效。都是动效的时机没有控制好。这里我们先自己来实现一下动效的流转。 刚开始我实现的时候，动效只有开始状态和结束状态，需要很多的变量和逻辑来控制这个动效。 后来我参考了react-transition-group组件的实现，他是将动效拆分成了几个部分，每个部分分别进行控制。 展开动效的顺序：enter -> enter-active -> enter-done； 关闭动效的顺序：exit -> exit-active -> exit-done；动效过程在enter-active和exit-active的过程中。 我们再通过一个变量 active 来控制是关闭动效是否已执行关闭，参数 open 只控制是执行展开动效还是关闭动效。 当 open 和 active 都为 false 时，才销毁弹窗。 const Modal = ({ open, children, onClose }) => { const [active, setActive] = useState(false); // 弹窗的存在周期 if (!open && !active) { return null; } return ReactDOM.createPortal( {children} x , document.body, ); };这里我们接着添加动效过程的变化： const [aniClassName, setAniClassName] = useState(''); // 动效的class // transition执行完毕的监听函数 const onTransitionEnd = () => { // 当open为rue时，则结束状态为'enter-done' // 当open未false时，则结束状态为'exit-done' setAniClassName(open ? 'enter-done' : 'exit-done'); // 若open为false，则动画结束时，弹窗的生命周期结束 if (!open) { setActive(false); } }; useEffect(() => { if (open) { setActive(true); setAniClassName('enter'); // setTimeout用来切换class，让transition动起来 setTimeout(() => { setAniClassName('enter-active'); }); } else { setAniClassName('exit'); setTimeout(() => { setAniClassName('exit-active'); }); } }, [open]);Modal 组件完整的代码如下： const Modal = ({ open, children, onClose }) => { const [active, setActive] = useState(false); // 弹窗的存在周期 const [aniClassName, setAniClassName] = useState(''); // 动效的class const onTransitionEnd = () => { setAniClassName(open ? 'enter-done' : 'exit-done'); if (!open) { setActive(false); } }; useEffect(() => { if (open) { setActive(true); setAniClassName('enter'); setTimeout(() => { setAniClassName('enter-active'); }); } else { setAniClassName('exit'); setTimeout(() => { setAniClassName('exit-active'); }); } }, [open]); if (!open && !active) { return null; } return ReactDOM.createPortal( |
【本文地址】
公司简介
联系我们